<template>
  <div class="table-demo">
    <h3 class="title">基本</h3>
    <div>
      <p><d-switch v-model="border" small>显示边框</d-switch><d-switch v-model="stripe" small>栅栏背景</d-switch></p>
      <p><d-switch v-model="checkbox" small>多选</d-switch><d-switch v-model="serial" small>显示序号</d-switch><d-switch v-model="show" small>切换显示</d-switch></p>
      <p><d-switch v-model="loading" small>loading</d-switch></p>
    </div>
    <d-table :datas="datas" :border="border" :checkbox="checkbox" :stripe="stripe" :loading="loading" @select="select" @selectAll="selectAll">
      <d-table-item title="序号" prop="$serial" v-if="serial"></d-table-item>
      <d-table-item title="Name" prop="name"></d-table-item>
      <d-table-item title="Age" prop="age" align="center" sort="auto">></d-table-item>
      <d-table-item title="Arrdess1" prop="address"></d-table-item>
      <d-table-item title="Arrdess2" prop="address"></d-table-item>
      <d-table-item title="Arrdess-切换显示" prop="address" v-if="show" align="right"></d-table-item>
      <div slot="empty">自定义提醒：暂时无数据</div>
    </d-table>
  </div>
</template>

<script>
export default {
  name: 'tableDemo',
  data () {
    return {
      show: false,
      border: false,
      stripe: false,
      checkbox: false,
      serial: false,
      loading: false,
      datas: [
        { id: 5, name: '测试5', age: 12, address: '上海' },
        { id: 6, name: '测试6', age: 13, address: '上海' },
        { id: 7, name: '测试7', age: 14, address: '上海' },
        { id: 5, name: '测试5', age: 15, address: '上海' },
        { id: 6, name: '测试6', age: 16, address: '上海' },
        { id: 7, name: '测试7', age: 17, address: '上海' }
      ]
    }
  },
  methods: {
    add (datas) {
      datas.push({ id: 7, name: '添加', age: 12, address: '然后添加的' })
    },
    select (value) {
      console.log(value)
    },
    selectAll (value) {
      console.log(value)
    }
  }
}
</script>

<style lang="stylus" scoped>
// .table-demo
</style>
